<template>
	<view class="add-elevtor">
		<view class="content">
			<view class="title">
				请拍摄新增电梯的对应照片
			</view>
			<view class="tips">
				<view>
					1.电梯使用标志 
				</view>
				<view>
					2.电梯维保标志
				</view>
			</view>
			<view class="imgBox">
				<imageDragSort :parentStyle="parentStyle" :list="imgList"
				 @changeList="changeImg" :max="9"></imageDragSort>
			</view>
			
		</view>
	  <view class="footer">
		  <view class="cancle" @click="()=>{$emit('cancle')}">
		  	取消
		  </view>
		  <view class="comfire" @click="handleComfire">
		  	确认
		  </view>
	  </view>
	</view>
</template>

<script>
import imageDragSort from '@/components/image-drag-sort/index.vue';
export default {
	components:{
		imageDragSort
	},
	data() {
		return {
			imgList: []
		};
	},
	   methods: {
	   	changeImg(res) {
	   		this.imgList = res;
	   	},
		handleComfire() {
			if (!this.imgList.length) {
				uni.showToast({
					title:'请上传图片',
					icon:'none'
				});
			} else {
				this.$emit('comfire',this.imgList);
				this.imgList = [];
			}
		}
	   },
};
</script>

<style lang="scss" scoped>
	.add-elevtor{
		font-size: 28rpx;
		width: 506rpx;
		box-sizing: border-box;
		background-color: #fff;
		padding-top: 32rpx;
		border-radius: 16rpx;
		.content{
			text-align: center;
			// padding-left: 66rpx;
		}
		.title{
			font-size: 28rpx;
		}
		.tips{
			color: #0091FF;
			font-size: 24rpx;
		}
		.imgBox{
			display: flex;
			justify-content: center;
			margin:20rpx 10rpx 0 10rpx;
		}
		.footer{
			height: 80rpx;
			display: flex;
			border-top: 2rpx solid #f5f5f5;
			margin-top: 50rpx;
			view{
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
			}
			.cancle{
				color: #999;
			}
			.comfire{
				color: #0091ff;
			}
		}
		
	}
</style>
